<template>
  <div :class="flag?'big_divs big':'big' ">
  <header class="header"> <span @click="goBacks"> ＜ </span><span>房屋求租</span><span></span></header>
    <div class="top">
      <span :class="title == 1?'active top_span':'top_span'" @click="pulldown1">房产类型 ▼</span>
      <span :class="title == 2?'active top_spans':'top_spans'" @click="pulldown2">区域选择 ▼</span>
    </div>
    <div class="main">
      <div :class="zhenbuc?'mains':'same'" v-for="(item, index) in dataList" :key="index">
        <div class="same_one">
          <img :src="item.img" alt="" />
          <p>{{ item.name }}</p>
          <span>{{ item.time }}</span>
        </div>
        <div class="same_two">
          <p>{{ item.title }}</p>
        </div>
        <div class="same_three">
          <p class="same_three_p">
            意向区域：<span>{{ item.wantarea }}</span>
          </p>
          <p class="same_three_p2">
            意向价格：<span>{{ item.wantprice }}</span>
          </p>
          <div class="icon">
            <span
              id="first"
              class="iconfont icon-xiaoxi"
              style="color: 'red'"
              @click="
                gotalk(index, name, time, title, wantarea, wantprice, img)
              "
            ></span>
            <span id="second" class="iconfont icon-weibiaoti-" @click="gophones"></span>
          </div>
        </div>
      </div>
      <div :class="zhenbuc == true?'actives':'mains'">暂无此房源</div>
    </div>
    <div :class="flag1?'box_quan':'quan' ">
      <div class="quan_pro">
        <ul> <li v-for="(item,index) in list1" :key='index'>{{item}} </li> </ul>
      </div>
      <div class="quan_foot" @click="footbtn"></div>
    </div>
    <div :class="flag2?'box_yan':'yan' ">
      <div class="quan_max">
        <ul> <li v-for="(item,index) in list2" :key='index' @click="btns(item)">{{item}}</li> 
          <li @click="btnclear">重置</li>
        </ul>
      </div>
      <div class="quan_foot" @click="footbtn"></div>
    </div>
  </div>
</template>

<script>
import "./index.scss";
import "../../font_5gow75u3zef/iconfont.css";
import { log } from 'util';

export default {
  data() {
    return {
      dataList: [
        {
          name: "用户名称",
          time: "上午9:00",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "昌平区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
        {
          name: "用户名称",
          time: "1天前",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "海淀区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
        {
          name: "用户名称",
          time: "3天前",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "朝阳区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
        {
          name: "用户名称",
          time: "一个月前",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "怀柔区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
      ],
      dataList2: [
        {
          name: "用户名称",
          time: "上午9:00",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "昌平区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
        {
          name: "用户名称",
          time: "1天前",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "海淀区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
        {
          name: "用户名称",
          time: "3天前",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "朝阳区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
        {
          name: "用户名称",
          time: "一个月前",
          title: "北京昌平区沙河镇顺杀路19号求租一居室",
          wantarea: "怀柔区",
          wantprice: "3000.00/月",
          img: "../../static/head.png",
        },
      ],
      list1:['单元式住宅','公寓式住宅','复式住宅','跃层式住宅','花园洋房式住宅','小户型住宅','多层住宅','高层住宅','小高层住宅','商铺/门面房','厂房','写字楼','独院/别墅','车库'],
      list2:['东城区','西城区','朝阳区','丰台区','石景山区','海淀区','顺义区','通州区','大兴区','房山区','门头沟区','昌平区','平谷区','密云区','怀柔区','延庆区'],
      flag1:false,
      flag2:false,
      flag:false,
      title:'',
      zhenbuc:false
    };
  },
  methods: {
    gotalk(index, name, time, title, wantarea, wantprice, img) {
      uni.navigateTo({
        url:
          "/pages/detail/gotalk?index=" +
          index +
          "&dataList=" +
          JSON.stringify(this.dataList) +
          "&name=" +
          name +
          "&time=" +
          time +
          "&title=" +
          title +
          "&wantarea=" +
          wantarea +
          "&wantprice=" +
          wantprice +
          "&img=" +
          img,
      });
      console.log(index);
    },
    goBacks:function(){
      wx.switchTab({
          url:'/pages/publish/index'
      })
    },
    pulldown1(){
      this.flag1=true
      this.flag2=false
      this.flag=true
      this.title=1
    },
    pulldown2(){
      this.flag2=true
      this.flag1=false
      this.flag=true
      this.title=2
    },
    footbtn(){
      this.flag=false
      this.flag1=false
      this.flag2=false
      this.title=''
    },
    btns(arr){
      let res = this.dataList2.filter(item=>item.wantarea == arr)

      if(res.length){
        this.zhenbuc = false
        this.dataList = res
      }else{
        this.flag= false
        this.zhenbuc = true
      }
      this.flag2= false
    },
    btnclear(){
      this.dataList = this.dataList2
      this.flag2= false
      this.flag=false
       this.zhenbuc = false
    },
    gophones:function(){
      wx.navigateTo({
        url:'/pages/detail/phone'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
</style>